<script setup>
import SltFromTable from '@/components/SltFromTable/SltFromTable.vue'
import WuziCg from '@/views/WuziManage/WuziCg/WuziCg.vue'
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import api from '@/api/index.js'
import SltFromApi from '@/components/SltFromApi/SltFromApi.vue'
import { getOptions, getConsants } from '@/utils/index.js'

const emits = defineEmits(['close', 'init', 'reload'])
const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({})
  }
})
// 表单数据
const formData = ref({
  type: 1,
  outTypeId: '',
  outTypeName: '',
  orderNo: '',
  outBigTypeId: '',
  outBigTypeName: '',
  outSmallTypeId: '',
  outSmallTypeName: '',
  productName: '',
  quantity: '',
  unit: '',
  price: '',
  notes: '',
  supplier: '',
  accepterId: '',
  accepterName: '',
  storageId: '',
  storageName: '',
  specs: ''
})
// 是否显示弹窗
const show = ref(false)
// 同步表格数据到表单数据内
watch(
  () => props.curRow,
  async (val) => {
    let resObj = {}
    if (props.curRow.id && show.value) {
      const { resultObject } = await api.getCrkInfo({ id: props.curRow.id })
      resObj = resultObject
    } else {
      formData.value = {
        type: 1,
        outTypeId: '',
        outTypeName: '',
        orderNo: '',
        outBigTypeId: '',
        outBigTypeName: '',
        outSmallTypeId: '',
        outSmallTypeName: '',
        productName: '',
        quantity: '',
        unit: '',
        price: '',
        notes: '',
        supplier: '',
        accepterId: '',
        accepterName: '',
        storageId: '',
        storageName: '',
        specs: ''
      }
    }
    formData.value = { ...formData.value, ...val, ...resObj }
    console.log(formData.value)
  },
  { deep: true, immediate: true }
)
// 提交按钮loading状态
const submitLoading = ref(false)
// 新增数据
const addItem = async (info) => {
  try {
    submitLoading.value = true
    let params = {
      ...formData.value,
      ...info,
      outBigTypeName: getConsants('inventory_big_type', info.outBigTypeId),
      outSmallTypeName: getConsants('inventory_type', info.outSmallTypeId),
      outTypeName: getConsants('inventory_small_type', info.outTypeId)
    }
    // const data = await api.editCgdd(params)
    message.success('修改成功')
    show.value = false
    setTimeout(() => {
      submitLoading.value = false
    }, 30)
    emits('init')
    return Promise.resolve('xxx')
  } catch (error) {
    setTimeout(() => {
      submitLoading.value = false
    }, 30)
    return Promise.reject(error)
  }
}
// 表单提交，验证通过了
const onFinish = async (values) => {
  return Promise.resolve(await addItem(values))
}
// 验证失败
const onFinishFailed = async (errorInfo) => {
  console.log('Failed:', errorInfo)
  return Promise.resolve(errorInfo)
}
// 打开弹窗
const open = () => {
  show.value = true
}
// 表单节点
const formRef = ref()
// 提交表单
const submit = () => {
  return new Promise((resolve, reject) => {
    formRef.value
      .validateFields()
      .then(async (e) => {
        const data = await onFinish(e)
        resolve(data)
      })
      .catch(async (d) => {
        const data = await onFinishFailed(d)
        reject(data)
      })
  })
}
defineExpose({ open, submit })
</script>

<template>
  <a-form
    ref="formRef"
    :model="formData"
    layout="vertical"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item label="入库类型" name="outTypeId" :rules="[{ required: true, message: '请选择' }]">
      <a-select
        disabled
        v-model:value="formData.outTypeId"
        allowClear
        :options="getOptions('inventory_type')"
        :fieldNames="{ label: 'constLabel', value: 'constValue' }"
        @change="formData.orderNo = ''"
      />
    </a-form-item>
    <a-form-item
      label="采购订单"
      name="orderNo"
      :rules="[{ required: true, message: '请选择' }]"
      v-if="formData.outTypeId === 1"
    >
      <a-form-item-rest>
        <SltFromTable
          v-model="formData.orderNo"
          disabled
          :nameValue="formData.orderNo"
          :component="WuziCg"
          :fieldNames="{ name: 'orderNo', id: 'orderNo' }"
        />
      </a-form-item-rest>
    </a-form-item>
    <a-form-item
      label="物资名称"
      name="productName"
      :rules="[{ required: true, message: '请输入' }]"
    >
      <SltFromApi
        disabled
        v-model="formData.productName"
        :params="{ outBigTypeId: formData.outBigTypeId, outSmallTypeId: formData.outSmallTypeId }"
      />
    </a-form-item>
    <a-form-item label="数量" name="quantity" :rules="[{ required: true, message: '请输入' }]">
      <a-input-number disabled :min="0" v-model:value="formData.quantity" allowClear />
    </a-form-item>
    <a-form-item label="单位" name="unit" :rules="[{ required: true, message: '请选择' }]">
      <a-select
        disabled
        v-model:value="formData.unit"
        allowClear
        :options="getOptions('unit')"
        :fieldNames="{ label: 'constLabel', value: 'constLabel' }"
      />
    </a-form-item>
    <a-form-item label="单价(元)" name="price">
      <a-input-number disabled :min="0" v-model:value="formData.price" allowClear />
    </a-form-item>
    <!-- <a-form-item
      label="入库人员"
      name="storageName"
      :rules="[{ required: true, message: '请选择' }]"
    >
      <a-input v-model:value="formData.storageName" allowClear />
    </a-form-item> -->
  </a-form>
</template>